<!--
 * @Description: 设置审批人
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2022-10-18 19:36:00
 * @LastEditTime: 2022-11-24 16:59:18
 * @FilePath: \cscec-pms-admin\src\views\systemManage\workflowManagement\monitoring\components\SetApprover.vue
-->
<template>
  <a-modal
    title="选择审批人"
    :width="1200"
    :visible="visible"
    :confirm-loading="confirmLoading"
    centered
    class="set-approver"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <div class="set-approver-wrapper">
      <!-- 流程图 -->
      <a-spin :spinning="flowChartLoading">
        <img
          class="flow-chart"
          :src="flowChart"
        >
      </a-spin>
      <!-- 流程图 -->
      <!-- 流程节点列表 -->
      <s-table
        ref="table"
        bordered
        row-key="key"
        :columns="columns"
        :data="loadData"
        :alert="true"
        show-size-changer
        show-quick-jumper
        :show-pagination="false"
      >
        <template
          slot="userName"
          slot-scope="text,record"
        >
          <Ellipsis
            v-if="record.completed === 1"
            :length="50"
            tooltip
            placement="right"
          >
            {{ text }}
          </Ellipsis>
          <a-select
            v-else
            v-model="record.userId"
            mode="multiple"
            class="width-100"
            placeholder="请选择处理人"
            @focus="getUserList(record)"
          >
            <a-select-option
              v-for="{ userId, name } in record.userList"
              :key="userId"
            >
              {{ name }}
            </a-select-option>
          </a-select>
        </template>
        <template
          slot="opinions"
          slot-scope="text"
        >
          <Ellipsis
            :length="30"
            tooltip
          >
            {{ text }}
          </Ellipsis>
        </template>
      </s-table>
      <!-- 流程节点列表 -->
    </div>
  </a-modal>
</template>
<script>
import { getFlowChart, getAdminAssign } from '@/api/process'
import { columns1 } from '../model'
import { Ellipsis } from '@/components'
import { getCurrentProcessList } from '@/utils/requestWithParams.js'
import { updateVariables } from '@/api/indexPage'
export default {
  name: 'SetApprover',
  components: {
    Ellipsis
  },
  props: {
    // 模态框显示隐藏
    visible: {
      type: Boolean,
      default: false
    },
    businessId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 流程图
      flowChart: '',
      // 流程图加载
      flowChartLoading: false,
      // 提交loading
      confirmLoading: false,
      // 表头
      columns: columns1,
      // 模态框初始
      isInit: false,
      // 表格数据
      data: []
    }
  },
  watch: {
    // 监听模态框显示隐藏
    visible: {
      handler(val) {
        if (val) {
          this.getFlowChart()
          // 避免重复请求列表
          this.$nextTick(() => {
            this.isInit = true
            this.$refs.table.refresh()
          })
        } else {
          this.isInit = false
          this.flowChart = ''
          this.$refs.table.localDataSource = []
        }
      }
    }
  },
  methods: {
    /**
     * @description: 获取流程图
     * @return {void}
     */
    getFlowChart() {
      this.flowChartLoading = true
      getFlowChart(this.businessId)
        .then((res) => {
          if (res.code === this.SUCCESS_CODE) {
            this.flowChart = 'data:image/png;base64,' + res.data
          }
        })
        .finally(() => {
          this.flowChartLoading = false
        })
    },
    /**
     * @description: 表格数据加载方法
     * @param {object} parameter 分页信息
     * @return {promise} 接口Promise
     */
    async loadData(parameter) {
      if (!this.isInit) return
      const res = await getCurrentProcessList.call(this, { businessId: this.businessId })
      if (res.status === this.SUCCESS_CODE) {
        this.data = res.data
      }
      return res
    },
    /**
     * @description: 获取处理人列表
     * @return {void}
     */
    getUserList(record) {
      getAdminAssign({
        businessId: this.businessId,
        taskKey: record.taskDefKey
      }).then((res) => {
        if (res.code === this.SUCCESS_CODE) {
          record.userList = res.data
        }
      })
    },
    /**
     * @description: 确认
     * @return {void}
     */
    handleOk() {
      const params = {
        businessId: this.businessId,
        variables: {}
      }
      console.log(this.data)
      // 组装处理人数据
      this.data.forEach((item) => {
        console.log(item.userId)
        if (item?.taskDefKey && item?.userId && item.userId.length) {
          params.variables[item.taskDefKey] = {
            assgins: item.userId.join(','),
            assignTypeEnum: 2
          }
        }
      })
      this.confirmLoading = true
      updateVariables(params)
        .then((res) => {
          if (res.data.code === this.SUCCESS_CODE) {
            this.$message.success('选择审批人成功！')
            this.$emit('refresh', null)
            this.handleCancel()
          }
        })
        .finally(() => {
          this.confirmLoading = false
        })
    },
    /**
     * @description: 取消
     * @return {void}
     */
    handleCancel() {
      this.$emit('update:visible', false)
    }
  }
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
@{deep} .ant-modal-centered .ant-modal {
  padding-bottom: 0;
}
.set-approver-wrapper {
  max-height: calc(var(--heightVh) * 0.9 - 156px);
  overflow-y: auto;
  padding-right: 20px;
}
.flow-chart {
  width: 100%;
  margin-bottom: 20px;
}
</style>
